<!-- <#assign CACHE_VERSION = "v=v=1.0.7"> -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>统计脚本编辑</title>
    <#include "./common/resource.ftl">
    <style>
        html,body{
            height: 100%;
        }

    </style>
    <body onload="load()" class="jm-noScroll">
        <div id="script" class="script-container">
            <div class="script-form script-add">
                <span>脚本名称：</span>
                <el-input v-model="scriptName" style="width:200px;margin-right:10px"></el-input>
                <el-button type="primary" style="margin-right:40px">保存</el-button>
                <span>脚本文件：</span>
<#--                <span style="margin-right:10px" v-if="fileList !== 'undefined'">{{fileList[0].name}}</span>-->
                <el-upload
                        class="upload-demo"
                        action=""
                        multiple
                        show-file-list="false"
                        :limit="1"
                        :file-list="fileList">
                    <el-button type="primary" style="margin-right:10px" v-if="type == 'add'">上传</el-button>
                    <el-button type="primary" style="margin-right:10px;" v-else>更新</el-button>
                </el-upload>

<#--                <el-button type="primary" @click="handleRemove">删除</el-button>-->
            </div>
            <div>入参列表：</div>
            <el-table :data="tableData" class="script-table" border @cell-dblclick="cellDblClick">
                <el-table-column type="index" label="序号" align="center" width="80">
                    </el-table-column>
                <el-table-column
                        v-for="(item, index) in scriptColumns"
                        :key="index"
                        :prop="item.prop"
                        :label="item.label"
                        align="center"
                        :width="item.width ? item.width : ''"
                >
                    <template slot-scope="scope">
                        <div v-if="item.type == 'input'" >
                            <span v-if="!scope.row[item.prop + '$is']" style="cursor: pointer" >{{ scope.row[item.prop] }}</span>
                            <el-input v-if="scope.row[item.prop + '$is']"
                                      v-model="scope.row[item.prop]"
                                      @blur="cellBlur(scope.row, scope.column, scope.$index, item.prop)"
                                      :ref="item.prop">
                            </el-input>
                        </div>
                        <div v-else-if="item.type == 'select'">
                            <el-select v-model="scope.row[item.prop]" placeholder="请选择">
                                <el-option
                                        v-for="item in typeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button @click="handleAdd" type="primary">添加</el-button>
        </div>
        <script>
            vm = new Vue({
                el: "#script",
                data: {
                    type:"",
                    scriptName:"",
                    scriptColumns:[
                        {
                            label: '参数名称',
                            prop: 'name',
                            type: 'input',
                        },{
                            label: '参数符号',
                            prop: 'symbol',
                            type: 'input',
                        },{
                            label: '输入类型',
                            prop: 'type',
                            width: 240,
                            type: 'select',
                        },
                        {
                            label: '说明',
                            prop: 'explain',
                            align: 'center',
                            type: 'input',
                        }
                    ],//统计脚本列
                    tableData:[
                        {
                            id:1,
                            name:"xxxx",
                            symbol:"x",
                            explain:"",
                            type:"遥信量(多个)"
                        },{
                            id:2,
                            name:"xxxx",
                            symbol:"x",
                            explain:"",
                            type:"遥信量(多个)"
                        }
                    ],
                    typeList: [
                        {
                            value: '遥信量(多个)',
                            label: '遥信量(多个)'
                        },
                        {
                            value: '遥测量(多个)',
                            label: '遥测量(多个)'
                        },
                        {
                            value: '场站选择',
                            label: '场站选择'
                        },
                        {
                            value: '间隔选择',
                            label: '间隔选择'
                        },
                        {
                            value: '设备选择',
                            label: '设备选择'
                        },
                        {
                            value: '属性选择',
                            label: '属性选择'
                        },
                        {
                            value: '是否按时段重复',
                            label: '是否按时段重复'
                        },
                        {
                            value: '开始时间',
                            label: '开始时间'
                        },
                        {
                            value: '结束时间',
                            label: '结束时间'
                        }
                    ],
                    fileList: [{
                        name: 'food.jpeg',
                        url: ''
                    }]
                },
                created(){
                    this.type = localStorage.getItem("temp");
                },
                methods: {
                    handleRemove(file, fileList) {
                        console.log(file, fileList);
                    },
                    handlePreview(file) {
                        console.log(file);
                    },
                    <#--handleExceed(files, fileList) {-->
                    <#--    this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);-->
                    <#--},-->
                    <#--beforeRemove(file, fileList) {-->
                    <#--    return this.$confirm(`确定移除 ${ file.name }？`);-->
                    <#--}-->
                    //双击修改表格内容
                    cellDblClick(row, column) {
                        this.tableData = this.tableData.filter((item) => {
                            return item;
                        });
                        this.$set(row, [column.property + "$is"], true);
                        this.$nextTick(() => {
                            this.$refs[column.property][0].focus(); // 视图出现后使input获取焦点
                        });
                    },
                    // 可以编辑框失去焦点
                    cellBlur(row, column, index, prop) {
                        if (row[prop + "-span"]) {
                            let k = row[prop + "-span"].rowspan;
                            this.tableData.forEach((item, i) => {
                                if (i >= index && i < index + k) {
                                    item[prop] = row[prop];
                                }
                            });
                        }
                        row[column.property + "$is"] = false;
                    },
                    handleAdd(){
                        var rowData = {
                            name:"",
                            symbol:"",
                            explain:"",
                            type:""
                        }
                        this.tableData.push(rowData)
                    }
                }
            })

        </script>
    </body>
</html>
